<template>
	<view class="moreProjects">
		<view class="info" v-for="(item,index) in project" :key="item.id" @click="jumpProjectDetails(index)">
			<view class="image">
				<image :src="item.image_url" mode="scaleToFill" style="width: 180rpx; height: 180rpx;"></image>
			</view>
			<view class="right">
				<view class="title">
					<text>{{item.items_title}}</text>
				</view>
				<view class="price">
					<text>￥{{item.price}}</text>
					<text class="cishu">预约次 <text>{{item.sub_num}}</text> </text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.project = JSON.parse(decodeURIComponent(options.project));
			console.log(this.project);
			console.log(`juli`,options.juli);
			this.juli = options.juli
		},
		data() {
			return {
				project: null, 
				juli: null,
			};
		},
		methods:{
			jumpProjectDetails(index){
				uni.navigateTo({
					url: `../projectDetails/projectDetails?id=${this.project[index].id}&juli=${this.juli}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.moreProjects {
		padding: 30rpx;
		width: 100%;
		background-color: #F7F9FA;
	}

	.info {
		display: flex;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx;
		margin-bottom: 30rpx;

		.image {
			margin-right: 20rpx;
		}
	}

	.right {
		display: flex;
		width: 100%;
		height: 180rpx;
		flex-wrap: wrap;
		position: relative;
	}

	.title {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.price {
		width: 100%;
		color: #FF3A25;
		font-size: 34rpx;
		font-weight: 400;
		position: absolute;
		bottom: 5rpx;
		left: 0;
		@include chuizhilianduan;

		.cishu {
			@include shuipingchuijuzhong;
			color: #999999;
			font-size: 24rpx;
			margin-right: 30rpx;
			text {
				color: #2DD1BC;
				margin-left: 20rpx;
			}
		}
	}
</style>
